<template>
  <div class="gird">
    <router-link :to="item.to" class="van-col" v-for="item in newslist" :key="item.id">
        <i class="van-icon">
          <img :src="item.src" alt>
        </i>
        <span>{{item.title}}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data: () => ({
    newslist: [
      {
        id: 1,
        to: "/home/newslist",
        title: "新闻资讯",
        src: "static/images/menu1.png"
      },
      {
        id: 2,
        to: "/home/photolist",
        title: "图片分享",
        src: "static/images/menu2.png"
      },
      {
        id: 3,
        to: "/home/goodslist",
        title: "商品购买",
        src: "static/images/menu3.png"
      },
      {
        id: 4,
        to: "/home/newslist",
        title: "留言反馈",
        src: "static/images/menu4.png"
      },
      {
        id: 5,
        to: "/home/newslist",
        title: "视频区域",
        src: "static/images/menu5.png"
      },
      {
        id: 6,
        to: "/home/newslist",
        title: "联系我们",
        src: "static/images/menu6.png"
      }
    ]
  })
};
</script>
<style lang='less'>
.gird {
  overflow: hidden;
  .van-col {
    // float: none;
    text-align: center;
    // height: 100px;
    display: inline-block;
    vertical-align: middle;
    width: 33.33333%;
    .van-icon {
      font-size: 32px;
      margin: 20px 0 10px;
      color: #323233;
      img {
        width: 50%;
        height: 50%;
      }
    }
    span {
      display: block;
      padding: 0 5px;
      font-size: 12px;
      line-height: 18px;
      color: #7d7e80;
    }
  }
}
</style>